<template>
  <div class="checkout-address">
    <div class="text">
      <ul>
        <li>
          <span>收<i />货<i />人：</span>
          {{ list[nowindex] && list[nowindex].receiver }}
        </li>
        <!-- .replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") -->
        <li>
          <span>联系方式：</span>{{ list[nowindex] && list[nowindex].contact }}
        </li>
        <li>
          <span>收货地址：</span>{{ list[nowindex] && list[nowindex].address }}
        </li>
      </ul>
      <a href="javascript:;" @click="xiugai">修改地址</a>
    </div>
    <div class="action">
      <button class="btn" >切换地址</button>
      <button class="btn" @click="change">添加地址</button>
    </div>

    <jie-dialog v-show="jie" :maydialog="maydialog" @change="change">
      <template v-slot:footer>
        <div class="xtx-form">
          <div class="xtx-form-item">
            <div class="label">收货人：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入收货人"
                v-model="formData.receiver"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">手机号：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入手机号"
                v-model="formData.contact"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地区：</div>
            <div class="field">
              <city-view
                :fullCityData="fullCityData"
                @setFullData="changeFullData"
              ></city-view>
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">详细地址：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入详细地址"
                v-model="formData.address"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">邮政编码：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入邮政编码"
                v-model="formData.postalCode"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地址标签：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入地址标签，逗号分隔"
                v-model="formData.addressTags"
              />
            </div>
          </div>
        </div>
      </template>
    </jie-dialog>
  </div>
</template>
<script>
import { listress } from "@/utils/api/jieapi";
import JieDialog from "./JieDialog.vue";
import CityView from "../utils/CityView.vue";
export default {
  components: { JieDialog, CityView },
  data() {
    return {
      nowindex: 0,
      list: [],
      jie: false,
      maydialog: {
        type: "", //添加还是修改
        title: "", //标题
        flag: "",
      },
      fullCityData: {
        procode: null,
        proname: "北京市",
        citycode: null,
        cityname: "市县区",
        coucode: null,
        couname: "东城区",
      },
      formData: {
        receiver: "",
        contact: "",
        address: "",
        postalCode: "",
        addressTags: "",
      },
    };
  },
  async mounted() {
    let res = await listress();
    this.list = res.result;
  },

  methods: {
    // 确定
    change() {
      this.jie = !this.jie;
      this.maydialog = {
        type: "add", //添加还是修改
        title: "添加收货地址", //标题
        flag: false,
      };
    },
    //地址
    changeFullData(obj) {
      this.fullCityData = obj;
    },
    // 修改
    xiugai() {
      this.jie = !this.jie;
      this.maydialog = {
        title: "修改地址", //标题
        type: "edit", //添加还是修改
        flag: false,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.checkout-address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: $xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 4px;
      color: #666;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
.xtx-dialog {
  :deep(.wrapper) {
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.xtx-form {
  padding: 0;
  input {
    outline: none;
    &::placeholder {
      color: #ccc;
    }
  }
}
.xtx-city {
  width: 320px;
  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}
.xtx-form-item {
  display: flex;
  align-items: center;
  width: 700px;
  margin: 0 auto;
  padding-bottom: 25px;
}
.label {
  width: 180px;
  padding-right: 10px;
  text-align: right;
  color: #999;
}
.xtx-form-item .field {
  width: 320px;
  height: 50px;
  position: relative;
}
.input {
  border: 1px solid #e4e4e4;
  width: 320px;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
}
</style>